<template>
    <p>Vuex</p>
    <p>count:{{ this.$store.state.count }}</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>
    <p>countAlias:{{ countAlias }}</p>

    <P>Gettrs ========</P>
    <P>countAddFive:{{ this.$store.getters.countAddFive }}</P>
    <P>countAddFiveAddTen:{{ this.$store.getters.countAddFiveAddTen }}</P>
    <P>countAddFive:{{ countAddFive }}</P>
    <P>countAddFiveAddTen:{{ countAddFiveAddTen }}</P>
    <p>countAddFiveAlias:{{ countAddFiveAlias }}</p>
    <p>countAddFiveAlias:{{ countAddFiveAlias }}</p>


    <p>Mutations================</p>
    <button @click="addMut">addMut</button>
    <button @click="addPlayloadMut">addPlayloadMut</button>
    <button @click="add">add</button>
    <button @click="addCommit">addCommit</button>

    <button @click="addAlias">addAlias</button>


    <p>Atcions=============</p>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asyncAddActionMut">asyncAddAction</button>
    <button @click="asyncAddPlayloadActionMut">asyncAddPlayloadAction</button>
    <button @click="addAction">addAction</button>
    <button @click="addActionDispatch">addActionDispatch</button>


    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A的state{{ $store.state.a.countA }}</p>
    <p>访问 模块A的getters{{ $store.getters.countAA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B的state{{ $store.state.b.countB }}</p>
    <p>访问 模块B的getters{{ $store.getters['b/countBB'] }}</p>


    <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-mutations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-actions</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

    <h1>MapXXX</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>countA:{{ countA }} </p>
    <p>getters</p>
    <p>countAA:{{ countAA }}</p>
    <p>mutations</p>
    <button @click="increaseA">触发increaseA</button>
    <p>actions</p>
    <button @click="asyncIncreaseA">触发asyncIncreaseA</button>

    <h2>局部</h2>
    <p>moduleB state</p>
    <p>countB::{{ countB }}</p>

    <p>moduleB mutations</p>
    <button @click="increaseB">触发increaseB</button>




</template>

<script>
import {mapState,mapGetters,mapMutations} from "vuex"
export default{
    computed:{
        // count(){
        //     return this.$store.state.count
        // },
        // test(){
        //     return this.$store.state.test
        // }

       // ...mapState(['count']),
       ...mapState({
        count:state =>state.count,
        countAlias:state =>state.count,
        //count:'count'
       }),

       //gettrs
        // countAddFive(){
        //  return this.$store.getters.countAddFive
        // },
        // countAddFiveAddTen(){
        // return this.$store.getters.countAddFiveAddTen
        // },

        //数组的形式
         // ...mapGetters(['countAddFive','countAddFiveAddTen'])

         //对象的写法
     ...mapGetters({
         countAddFive:'countAddFive',
         countAddFiveAddTen:'countAddFiveAddTen',
         countAddFiveAlias:'countAddFive'
     }),
     // 映射模块A的countA
     ...mapState({
            countA: state => state.a.countA
        }),
        // 映射全局getters
        ...mapGetters(['countAA']),

        // 映射模块B的state
        ...mapState('b',['countB'])


    },
    methods:{
        addMut(){
            this.$store.commit('add')
        },
        addPlayloadMut(){
           // this.$store.commit('addPlayload',{num:10})
           this.$store.commit({
            type:'addPlayload',
            num:10
           })
        },

        //数组形式
        //...mapMutations(['add','addPlayload']),
        addCommit(){
            this.addPlayload({num:20})
        },
        //对象及重命名
        ...mapMutations({
            add:'add',
            addAlias:'add',
            addPlayload:'addPlayload'
        }),
        

        //触发模块中的内容
        commitIncreaseA(){
           this.$store.commit('increaseA') 
        },
        commitAsyncIncreaseA(){
            this.$store.dispatch('asyncIncreaseA')
        },
        commitIncreaseB(){
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB(){
            this.$store.dispatch('b/asyncIncreaseB')
        },


        // 映射全局的muations
        ...mapMutations(['increaseA']),
        // 映射全局的actions
        ...mapActions(['asyncIncreaseA']),
        
        // 映射模块B的mutations
        ...mapMutations('b', ['increaseB']),



        

        addActionMut(){

            this.$store.dispathch('addAction')
        },
        asyncAddActionMut(){
            this.$store.dispathch('asyncAddAction')
        },
        
        asyncAddPlayloadActionMut(){
            this.$store.dispathch('asyncAddPlayloadActionMut',{num:20})
        },
        ...mapActions (['addAction','asyncAddPloyloadAction']),
        addActionDispatch(){
            this.asyncAddPloyloadActionMut({num:30})
        }

    },
    mounted(){
        console.log(this.$store);
    }
}
</script>